:root{
    --color: #555;
    --color2: #777;
    --color3: #999;
    --hover-acolor:#e5cb94;
    --back:#f5f5f5;
    --backeee:#e5e5e5;
    --backfd:#fdfdfd;
    --box-width: 70%;
}
/*header*/
.header{height: 50px;background: var(--back);box-shadow: 0 0 10px #dbdbdb;position: fixed;top:0;left: 0;right: 0;z-index: 6;}
.header:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
.header .header-box{margin: 0 auto;width: var(--box-width);}
.header .header-box .header-logo{height: 50px;line-height: 50px;font-size: 20px;float: left;padding-right: 30px;}
.header .header-box .header-logo a{color: var(--color)}
.header .header-box .header-form{float: right;height: 50px;padding: 10px 0;box-sizing: border-box;display: none;}
.header .header-box .header-form input[type='text']{-webkit-box-shadow: none;-moz-box-shadow: none;background: url(../images/header-sub.png) 6px center no-repeat var(--backeee);padding: 3px 5px 3px 26px;color: var(--color2);border: 0;transition: .5s;-webkit-transition: .5s;height: 30px;box-sizing: border-box;border-radius: 8px;width: 180px;}
.header .header-box .header-form input[type='text']:focus{width: 200px;background: url(../images/header-sub.png) 6px center no-repeat var(--backfd);}

.menu-toggle{display: none;}

.header .header-box ul{float: left;max-width: 600px;overflow: hidden;height: 50px;}
.header .header-box ul li{float: left;line-height: 50px;}
.header .header-box ul li a{padding: 0 20px;color: var(--color2);}
.header .header-box ul li a:hover{color: var(--hover-acolor);}
.header .header-box ul li.on{border-bottom: 2px solid var(--hover-acolor);height: 48px;}
.header .header-box ul li.on a{color: var(--hover-acolor);}
.header .header-box ul li.nav-user{display: none;}
/*footer*/
footer{background: var(--back);padding: 15px 0;overflow: hidden;position: fixed;bottom: 0;left: 0;right: 0;z-index: 3;}
footer .footer-main{width: var(--box-width);margin: 0 auto;line-height: 20px;font-size: 12px;color: var(--color2);}
footer .footer-main cite{margin-left: 15px;}
footer .footer-main cite span{margin: 0 3px;}


.main-box{margin: 20px auto;width: var(--box-width);padding-top: 50px;padding-bottom: 52px;}
.main-box:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
.main-box .box-content{margin-right: 260px}
.main-box .box-content .box-list{}
.main-box .box-content .box-list ul li{margin-bottom: 15px;overflow: hidden;box-shadow: 1px 10px 10px #f5f5f5,-1px -1px 10px #f5f5f5;-webkit-transition: 1s;transition: 1s;}
.main-box .box-content .box-list ul li:hover{box-shadow: 1px 15px 15px #ececec,-1px -1px 15px #ececec;background: #f8f8f8;cursor: pointer;}
.main-box .box-content .box-list ul li .list-title{font-size: 24px;color: var(--color);padding: 15px 15px 10px;}
.main-box .box-content .box-list ul li .list-desc{padding:0 15px;color: var(--color3);font-size: 12px;line-height: 20px;}
.main-box .box-content .box-list ul li .list-desc cite{margin-right: 20px;}
.main-box .box-content .box-list ul li .list-conter{padding: 15px;font-size: 14px;color: var(--color2);line-height: 20px;}
.main-box .box-content .box-list ul li .list-btn{text-align: right;padding: 0 15px 15px;}

.pages{overflow: hidden;box-shadow: 1px 10px 10px #f5f5f5,-1px -1px 10px #f5f5f5;padding: 15px;color: var(--color2);}
.pages:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
.pages .pages-pr{width: 10%;float: left;text-align: left;}
.pages .pages-center{width: 80%;float: left;text-align: center;color: var(--color3);}
.pages .pages-center a{padding: 0 8px;}
.pages .pages-center a:hover{color: var(--hover-acolor);}
.pages .pages-center a.active{color: var(--hover-acolor);}
.pages .pages-tj{display: inline-block;}
.pages .pages-ne{width: 10%;float: left;text-align: right;}

.main-box .box-other{width: 240px;float: right;}
.other-block{box-shadow: 1px 10px 10px #f5f5f5,-1px -1px 10px #f5f5f5;margin-bottom: 15px;padding: 0 15px 10px;}
.other-block .other-title{height: 35px;line-height: 35px;border-bottom: 1px solid var(--back);}
.other-block .other-title strong{border-bottom:2px solid var(--hover-acolor);display: inline-block;height: 34px;}
.other-block p{margin: 8px 0;font-size: 12px;color: var(--color3);}
.other-block .other-desc{margin: 15px 0;font-size: 12px;color: var(--color3);line-height: 20px;}
.other-block .index-user{text-align: center;}
.other-block p.other-prompt{text-align: center;}
.other-block p.other-text{text-align: center;color: var(--hover-acolor);}
.other-block p a{margin: 0 5px;}

.other-block .other-line{margin-top: 10px;height: 40px;line-height: 40px;}
.other-block .other-line:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
.other-block .other-line span{width: 70px;text-align: right;color: var(--color2);float: left;display: inline-block;}
.other-block .other-line input[type="text"],.other-block .other-line input[type="password"]{border: 1px solid var(--backeee);box-sizing: border-box;padding: 5px;color: var(--color2);float: left;width: 255px;border-radius: 5px;-webkit-transition: .5s;transition:.5s;}
.other-block .other-line input[type="text"]:focus,.other-block .other-line input[type="password"]:focus{width: 280px;border: 1px solid #dbdbdb;}
.other-block .other-btn{text-align: center;padding: 5px;}
.other-block .other-btn input[type="button"]{height: 30px;border: 1px solid var(--hover-acolor);background: var(--hover-acolor);width: 60%;border-radius: 5px;color: var(--back);cursor: pointer;}

.main-404{padding: 8% 20% 25%;text-align: center;}
.main-404 img{width: 300px;}
.main-404 p{font-size: 14px;color: var(--color2);padding: 10px;letter-spacing: 5px;}
.main-404 p a{text-decoration: underline;}

.contents{overflow: hidden;box-shadow: 1px 10px 10px #f5f5f5,-1px -1px 10px #f5f5f5;padding: 15px;}
.contents .contents-box{padding-bottom: 10px;border-bottom: 1px solid #ececec;}
.contents .contents-box .contents-title{padding-bottom: 8px;line-height: 25px;font-size: 16px;color: var(--color);}
.contents .contents-box .contents-changes{font-size: 12px;color: var(--color3);}
.contents .contents-box .contents-changes span{margin: 0 4px;}
.contents .contents-box .contents-changes span:before{content: ' • ';}
.contents .contents-main{padding-top: 15px;line-height: 25px;}

.comments-main{overflow: hidden;margin-top: 15px;box-shadow: 1px 10px 10px #f5f5f5,-1px -1px 10px #f5f5f5;}
.comments-main .comments-tit{background: var(--back);overflow: hidden;color: var(--color2);padding: 15px;}
.comments-main .comments-list{padding: 10px 0;margin: 0 10px;border-bottom: 1px solid #ececec;}
.comments-main .comments-list .comments-nickname{font-size: 14px;color: var(--color);}
.comments-main .comments-list .comments-nickname span{float: right;font-size: 12px;color: #999;}
.comments-main .comments-list .comments-box{font-size: 12px;color: var(--color2);line-height: 25px;}

.web-err{margin-bottom: 15px;overflow: hidden;box-shadow: 1px 10px 10px #f5f5f5,-1px -1px 10px #f5f5f5;padding: 20px;text-align: center;font-size: 14px;color: var(--color2);}

.comments-txt{padding: 20px;overflow: hidden;}
.comments-txt textarea{width: 90%;border: 1px solid #ececec;border-radius: 5px;height: 60px;padding: 5px;line-height: 25px;float: left;box-sizing: border-box;border-right: 0;border-bottom-right-radius: 0;border-top-right-radius: 0;-webkit-transition: 1s;transition: 1s;color: var(--color2);}
.comments-txt textarea:focus{border: 1px solid #dcdcdc;background: #f8f8f8;}
.comments-txt input[type="button"]{width: 10%;border: 1px solid var(--hover-acolor);border-radius: 5px;height: 60px;padding: 5px;line-height: 25px;float: left;box-sizing: border-box;background: var(--hover-acolor);color: var(--backfd);border-bottom-left-radius: 0;border-top-left-radius: 0;cursor: pointer;font-size: 14px;}

.comments-err{padding: 20px;text-align: center;color: var(--hover-acolor);}

.user-main{width: 400px;margin: 200px auto;padding-top: 50px;}

#more_review{text-align: center;padding: 15px;font-size: 14px;color: #666;cursor: pointer;}
#more_review:hover{text-decoration: underline;}

pre{margin:.5em 0;padding:.4em .6em;border-radius:8px;background:#f8f8f8;}

@media screen and (max-width:768px){

    .header .header-box{margin: 0 auto;width: 96%;}

    .main-box{margin: 20px auto;width: 100%;padding-bottom: 95px;}
    .main-box .box-content{margin-right: 0;float: none;width: auto;}
    .main-box .box-other{width: 100%;float: none;overflow: hidden;margin-top: 15px;}
    .other-block .index-user{text-align: center;display: none;}

    .header .header-box .header-form{float: left;height: 50px;padding: 10px 0;box-sizing: border-box;margin-left: 20px;}


    .menu-toggle{flex:0 0 auto;width:40px;height:50px;cursor:pointer;position:relative;display: block;float: right;z-index: 6;}
    .cross,.hamburger{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
    .hamburger span{display:block;width:18px;height:2px;margin-bottom:3px;overflow:hidden;position:relative}
    .hamburger span:last-child{margin:0}
    .hamburger span:after,.hamburger span:before{content:"";position:absolute;width:100%;height:100%;background-color:#0f0f0f;transform:translateX(-200%);transition:transform ease .3s}
    .hamburger span:after{transform:translateX(0)}
    .hamburger span:nth-child(2):after,.hamburger span:nth-child(2):before{transition-delay:75ms}
    .hamburger span:last-child:after,.hamburger span:last-child:before{transition-delay:150ms}
    .menu-toggle:hover .hamburger span:before{transform:translateX(0)}
    .menu-toggle:hover .hamburger span:after{transform:translateX(200%)}
    .menu-toggle.active .hamburger span:before{transform:translateX(100%)}
    .menu-toggle.active .hamburger span:after{transform:translateX(200%)}
    .cross span{display:block;width:18px;height:2px;background-color:#0f0f0f;transform:translateY(50%) rotate(45deg) scaleX(0);transition:transform ease .2s}
    .cross span:last-child{transform:translateY(-50%) rotate(-45deg) scaleX(0)}
    .menu-toggle.active .cross span{transition-delay:450ms;transform:translateY(50%) rotate(45deg) scaleX(1)}
    .menu-toggle.active .cross span:last-child{transform:translateY(-50%) rotate(-45deg) scaleX(1)}
    #background{background: rgba(000,000,000,.5);position: fixed;right: 0;top: 0;bottom: 0;left:0;z-index: 4;display: none;}


    .header .header-box ul{float: none;max-width: 60%;min-width:40%;overflow: hidden;height: auto;position: fixed;top: 0;bottom: 0;background: #fff;z-index: 5;padding: 50px 15px;right: -100%;display: none;overflow-y: auto;}
    .header .header-box ul li{float: none;line-height: 50px;}
    .header .header-box ul li a{padding: 0 20px;color: var(--color2);}
    .header .header-box ul li a:hover{color: var(--hover-acolor);}
    .header .header-box ul li.on{border-bottom: 2px solid var(--hover-acolor);height: 48px;}
    .header .header-box ul li.on a{color: var(--hover-acolor);}
    .header .header-box ul li.nav-user{position: absolute;bottom: 30px;left: 0;right: 0;z-index: 6;line-height: 40px;display: block;}
    .header .header-box ul li.nav-user a{display: block;width: 80px;margin: 5px auto;text-align: center;background: var(--hover-acolor);color: #fff;border-radius: 5px;}
    .header .header-box ul li.nav-user a#nav-logout{background: var(--color2);}

    .pages .pages-pr{width: 20%;float: left;text-align: left;height: 10px;}
    .pages .pages-center{width: 60%;float: left;text-align: center;color: var(--color3);}
    .pages .pages-center a{padding: 0 8px;}
    .pages .pages-center a:hover{color: var(--hover-acolor);}
    .pages .pages-center a.active{color: var(--hover-acolor);}
    .pages .pages-tj{display: block;}
    .pages .pages-ne{width: 20%;float: left;text-align: right;height: 10px;}
    .pages .pages-tj{display: none;}

    footer{background: var(--back);padding: 15px 0;overflow: hidden;position: fixed;bottom: 0;left: 0;right: 0;z-index: 3;}
    footer .footer-main{width: 94%;margin: 0 auto;line-height: 20px;font-size: 12px;color: var(--color2);}
    footer .footer-main cite{display: block;}

    .comments-txt{padding: 20px;overflow: hidden;}
    .comments-txt textarea{width: 80%;}
    .comments-txt textarea:focus{border: 1px solid #dcdcdc;background: #f8f8f8;}
    .comments-txt input[type="button"]{width: 20%;}

    .user-main{width: 96%;margin: 20px auto;}
    .other-block .other-line input[type="text"],.other-block .other-line input[type="password"]{width: 180px;}
    .other-block .other-line input[type="text"]:focus,.other-block .other-line input[type="password"]:focus{width: 200px;border: 1px solid #dbdbdb;}

}



